<template>
	<view class="pageBg">
		<view class="tabBox">
			<fr-custom-tab :tabList="navList" tabKey="name" curLine="#E93323" curText="#111" textColor="#888" bg-color="#FFF" :margin-r="48" :pad="28" @handleClick="selectTab"></fr-custom-tab>
		</view>
		<view class="container">
			<scroll-view scroll-y="true"
			:scroll-top="scrollTop"
			@scroll="scroll"
			@scrolltolower="scrolltolower"
			refresher-enabled="true"
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="refresherrefresh"
			@refresherrestore="refresherrestore"
			@refresherabort="refresherabort"
			:style="{
				height: scrollHeight + 'px',
				width: '750rpx'}"
			>
				<view class="inner">
					<view v-if="!lastPage" class="noData f_36 tc_c flex_c_c_c">
						<text class="iconfont iconnoData margin_b24" style="font-size:180rpx;"></text>
						<text>木有数据呢~~</text>
					</view>
					<!-- <fr-waterfalls-flow v-if="waterfallsFlowVisible" ref="waterfallsFlow" :single="true" :list="list" @wapper-lick="handleSelect" @image-click="previewImage"></fr-waterfalls-flow> -->
					<view class="list">
						<block v-for="(item, index) in list" :key="item.id">
							<view class="imgItem" @click.stop="previewImage(item, index)">
								<image class="img" :src="item.image_url" mode="aspectFill"></image>
								<view class="tag f_22 fw_500 tc_w flex_r_c_c">{{item.resolution}}</view>
							</view>
						</block>
					</view>
					<view v-if="noMore" class="noMore f_28 tc_c flex_r_c_c">
						<text>木有了呢~~(〃'▽'〃)</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sysInfo: this.$tool.sysInfo(),
				scrollHeight: '',
				navList: [
					{value: '26', name: '动漫卡通'},
					{value: '5', name: '游戏壁纸'},
					{value: '6', name: '美女模特'},
					{value: '9', name: '风景大片'},
					{value: '15', name: '小清新'},
					{value: '11', name: '明星风尚'},
					{value: '14', name: '萌宠动物'},
					{value: '12', name: '汽车天下'},
					{value: '10', name: '炫酷时尚'},
					{value: '29', name: '月历壁纸'},
					{value: '7', name: '影视剧照'},
					{value: '13', name: '节日美图'},
					{value: '22', name: '军事天地'},
					{value: '16', name: '劲爆体育'},
					{value: '18', name: 'BABY秀'},
					{value: '30', name: '爱情美图'},
					{value: '35', name: '文字控'},
					{value: '36', name: '4K专区'},
				],
				waterfallsFlowVisible: true,
				curNav: {},
				curPage: 1, // 当前页数, 默认1
				lastPage: 0, // 最后一页
				pageSize: 5, // 每页条数, 最大200
				noMore: false, // 没有更多
				list: [],
				imgList: [],
				refresh: false,
				scrollTop: 0,
				oldScrollTop: 0,
				refresherTriggered: false,
				_refresherTriggered: false
			};
		},
		onLoad(e) {
			this.setScrollHeight()
			this.curNav = this.navList[0]
			this.getData()
		},
		methods: {
			getData(isNextPage) {
				const _this = this
				this.curPage = isNextPage? ++this.curPage : 1
				
				const url = 'https://api.muxiaoguo.cn/api/360bizhi'
				_this.$api.get({
					url: url,
					loadingTip: _this.refresh ? '获取数据中...' : '',
					data: {
						api_key: '01ec9b5ab158e554',
						cid: _this.curNav.value,
						start: _this.curPage,
						count: _this.pageSize,
					},
					success: res => {
						if(res.data.length === 0) {
							_this.$tool.msg('数据请求过快, 请稍等再试')
							return
						}
						_this.lastPage = res.StartMax * 1
						
						if(_this.curPage === 1) {
							_this.imgList = []
						}
						let imgList = _this.imgList
						res.data.forEach((item, index) => {
							item.image_url = 'https' + item.imgurl.slice(-(item.imgurl.length-4))
							item.id = _this.curPage + '-' + (index + 1)
							
							imgList.push(item.image_url)
						})
						_this.imgList = imgList
						_this.list = isNextPage? [..._this.list, ...res.data] : res.data
						// _this.$refs.waterfallsFlow.refresh()
						
						this.refresherTriggered = false
						this._refresherTriggered = false
					},
					fail: err => {}
				})
			},
			setScrollHeight() {
				let sys = uni.getSystemInfoSync()
				let wh = sys.windowHeight
				let hei = 44 + 8
				let topHei = Math.floor(this.sysInfo.rpx * hei * 2)
				let scrollHeight = wh - topHei
				this.scrollHeight = scrollHeight
			},
			scrolltolower() {
				if(this.lastPage === 0) {
					return
				}
				if(this.curPage !== this.lastPage) {
					this.getData(true)
				} else {
					this.noMore = true
				}
			},
			refresherrefresh() {
				// 自定义下拉刷新被触发
				let _this = this;
				if (_this._refresherTriggered) {
					return
				}
				_this._refresherTriggered = true;
				// 界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true
				}
				this.getData()
			},
			refresherrestore() {
				// 自定义下拉刷新被复位
				let _this = this
				_this.refresherTriggered = false
				_this._refresherTriggered = false
			},
			refresherabort() {
				// 自定义下拉刷新被中止
				let _this = this
				_this.refresherTriggered = false
				_this._refresherTriggered = false
			},
			scroll (e) {
				// 记录scroll  位置
				this.oldScrollTop = e.detail.scrollTop
			},
			selectTab(e) {
				this.curNav = e
				this.getData()
				
				// 有时单独使用scrollTop回到顶部会无法成功, 需要使用@scroll方法
				// 视图会发生重新渲染
				this.scrollTop = this.oldScrollTop
				// 当视图渲染结束 重新设置为0
				this.$nextTick(() =>{
					this.scrollTop = 0
				})
			},
			checkNews(e) {
				this.$tool.go('/pages/works/news/newsDetails?id=' + e.uniquekey)
			},
			previewImage(e, i) {
				const _this = this
				uni.previewImage({
					current: i,
					urls: _this.imgList,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
.pageBg {
	.container {
		padding-top: 16rpx;
		box-sizing: border-box;
		.inner {
			padding: 0 28rpx;
			box-sizing: border-box;
			.list {
				.imgItem {
					width: 100%;
					height: 360rpx;
					border-radius: 24rpx;
					overflow: hidden;
					margin-bottom: 24rpx;
					position: relative;
					.img {
						width: 100%;
						height: 360rpx;
						display: block;
					}
					.tag {
						height: 36rpx;
						background-color: #888;
						padding: 0 12rpx;
						box-sizing: border-box;
						position: absolute;
						bottom: 0;
						right: 0;
						border-radius: 24rpx 0 0 0;
						opacity: 0.6;
					}
				}
			}
		}
	}
}
</style>
